<template>
	<view class="page-bg">
		<view>
			<view class="header-bg">
				<!-- <view :style="navbarStyle"> -->
				<view style="height: 44px;">

				</view>
				<view class="f cf f18 fb" style="height: 44px">
					<u-icon name="arrow-left" color="#fff" size="30" @click="back"></u-icon>
					<view class="f-f-c-c" style="width:100%;margin-left: 30px;">
						编辑资料
					</view>
					<!-- #ifdef APP -->
					<view class="f-f-c-c" style="width: 60px; margin-right: 10px;" @click="save">
						保存
					</view>
					<!-- #endif -->

				</view>
				<view class="f-f-c-c mt10">
					<view style="width: 70px;height: 70px;position: relative;" @click="changeAvatar">
						<image :src="userInfo.avatarUrl"
							style="width: 68px;height: 68px; position: absolute;bottom: 1px;right: 1px;"></image>
						<image src="../../static/user-edit/camera.png"
							style="width: 20px;height: 18px; position: absolute; bottom: 0px;right: 0px;"></image>
					</view>
				</view>

			</view>
			<view class="container-bg" style="transform: translateY(-20px);">
				<view class="item-bg f-s-b">
					<image src="../../static/user-edit/user-name.svg" style="width: 24px;height: 24px;"></image>
					<view class="c6 f16 ml10">昵称</view>
					<u-input style="font-weight: bold;" v-model="userInfo.name" :value="userInfo.name" border="none"
						class="c3 f16 fb ml20 f1"></u-input>
				</view>
				<view class="item-bg f-s-b">
					<image src="../../static/user-edit/user-sex.svg" style="width: 24px;height: 24px;"></image>
					<view class="c6 f16 ml10">性别</view>
					<view @click="showSex=true" class="c3 f16 fb ml20 f1">{{userInfo.sex==1?'男':'女'}}</view>
				</view>
				<view class="item-bg f-s-b">
					<image src="../../static/user-edit/user-birsth.svg" style="width: 24px;height: 24px;"></image>
					<view class="c6 f16 ml10">生日</view>
					<view @click="show=true" class="c3 f16 fb ml20 f1">{{userInfo.birthday&&userInfo.birthday!='null'?userInfo.birthday:'-'}}</view>
				</view>
				<!-- <view class="item-bg f-s-b">
					<image src="../../static/user-edit/user-location.svg" style="width: 24px;height: 24px;"></image>
					<view class="c6 f16 ml10">位置</view>
					<u-input value="安徽省 合肥市 庐阳区" border="none" class="c3 f16 fb ml20 f1"></u-input>
					<image src="../../static/user-edit/select-location.svg" style="width: 24px;height: 24px;"></image>
				</view> -->
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="save-bg f-f-c-c"  @click="save">
				保存
			</view>
			<!-- #endif -->
			<view class="logout-bg f-f-c-c mt20" @click="onLogout()">退出登陆</view>
		</view>

		<u-popup :show="showSex" mode="bottom" @cancel="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt10" @click="selectSex('1')">
					男
				</view>
				<view class="divider-line mt20 mb20"></view>
				<view class="fb c3 f18 f-f-c-c mt10" @click="selectSex('0')">
					女
				</view>
			</view>
		</u-popup>
		<u-datetime-picker ref="datetimePicker" @confirm="confirm" @cancel="close" :show="show" :v-model="dateT"
			:minDate="60" mode="date" :formatter="formatter"></u-datetime-picker>
	</view>

</template>

<script>
import * as config from '@/config'
	import {
		mapMutations
	} from 'vuex';

	import {
		onLoad
	} from '../../uni_modules/uview-ui/libs/mixin/mixin'
	export default {
		data() {
			return {
				userInfo: {},
				dateT: 0,
				navbarStyle: {
					width: '100%',
					height: '0px',
				},
				showSex: false,
				show: false,

			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync()
			this.navbarStyle.height = systemInfo.statusBarHeight + 'px'
			// this.userInfo = uni.getStorageSync("usemall_userInfo");
			this.userinfo();
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			...mapMutations(['saveUserInfo', 'logout']),
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			selectSex(val) {
				this.userInfo.sex = val
				this.showSex = false
			},
			close() {
				this.showSex = false
				this.show = false
			},
			confirm(v) {
				this.show = false
				console.log(this.timestampToDate(v.value))
				this.userInfo.birthday = this.timestampToDate(v.value)
			},
			timestampToDate(timestamp) {
				let date = new Date(timestamp); // 将时间戳乘以1000转换为毫秒级别
				let year = date.getFullYear(); // 获取年份
				let month = date.getMonth() + 1; // 获取月份（月份从0开始，所以需要加1）
				let day = date.getDate(); // 获取天
				return year + '-' + month + '-' + day; // 返回格式化后的年月日字符串
			},
			onLogout() {
				let that = this;
				uni.showModal({
					title: '系统提示',
					content: '是否确认退出？',
					showCancel: true,
					confirmText: '取消',
					cancelText: '确认',
					success: function(res) {
						if (res.cancel) {
							that.logout();
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					}
				})
			},
			userinfo() {
				let that = this
				that.request("get", "rider/wxLogin/getRiderInfo", uni.getStorageSync('token'), null).then(
					res => {
						console.log(res)
						if (res.code === 200) {
							that.userInfo = res.data
							that.dateT = res.data.birthday
						}
					})
			},
			save() {
				uni.showLoading({
					title: '保存中...'
				})
				let that = this
				if (that.userInfo.sex == 1) {
					that.userInfo.sex = 1;
				} else {
					that.userInfo.sex = 2;
				}
				that.request("get", "rider/wxLogin/updateRiderInfo?name=" +
					that.userInfo.name +
					"&avatarUrl=" + that.userInfo.avatarUrl +
					"&sex=" + that.userInfo.sex +
					"&birthday=" + that.userInfo.birthday, uni.getStorageSync('token'), null).then(
					res => {
						uni.hideLoading()
						console.log(res)
						if (res.code === 200) {
							uni.showToast({
								title: res.msg
							})
							that.userInfo = res.data
						}
					})
			},
			changeAvatar() {
				let that = this
				uni.chooseImage({

					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: config.def().baseUrl+'/oss/app/upload',//开发者服务器 url
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes)
								let data = JSON.parse(uploadFileRes.data)
								if (data.code == 200) {
									that.userInfo.avatarUrl = data.data.url
								}
							},
							fail: (res) => {
								console.log(res)
							}
						});
					}
				});

			},
			back() {
				uni.navigateBack()
			},
			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-input {
		font-weight: bold;
		margin-left: 20px;
	}
	.header-bg {
		width: 100%;
		height: 220px;
		background-repeat: round;
		background-image: url('../../static/mine/mine-bg.png');
		display: flex;
		flex-direction: column;
	}

	.container-bg {
		margin-left: 12px;
		margin-right: 12px;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}

	.item-bg {
		display: flex;
		align-self: center;
		justify-self: center;
		padding-left: 12px;
		padding-right: 12px;
		padding-top: 17px;
		padding-bottom: 17px;
		border-bottom: 1px #E4E4E4 solid;
	}
	.save-bg {
		width: 80%;
		margin: 10px auto;
		height: 44px;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 16px;
		background: #1e90ff;
		box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
		border-radius: 22px 22px 22px 22px;
		opacity: 1;
	}

	.logout-bg {
		width: 80%;
		margin: 10px auto;
		height: 44px;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 16px;
		background: #F14647;
		box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.16);
		border-radius: 22px 22px 22px 22px;
		opacity: 1;
	}

	.phone-bg {
		width: calc(100vw - 80px);
		margin: 0 auto;
		padding: 20px;
		background: #FFFFFF;
		border-radius: 17px 17px 17px 17px;
		color: #1AC388;
	}
</style>
